<template>
  <div v-clickoutside="closeIconBlock">
    <div class="in-page">
      <div class="in-border">
        <div class="in-search">
          <div class="in-cell">
            <div class="in-icon">
              <van-icon name="search" />
            </div>
            <div class="in-value">
              <div class="in-body"> <input @focus="onFocus()" @blur="onBlur()" v-on:keyup.enter="searchPerson" type="search" v-model="value" class="in-input" /> </div>
            </div>
            <div class="in-close">
              <div>
                <van-icon v-show="show" @click="onClose" name="close" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant';
import clickoutside from '@/js/directives.js';
export default {
  name: 'list',
  directives: { clickoutside },
  components: {
    [Icon.name]: Icon,
  },
  watch: {
    value() {
      if (this.value) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
  },
  data() {
    return {
      value: '',
      show: false,
    };
  },
  methods: {
    closeIconBlock() {
      this.show = false;
    },
    // 失去焦点事件
    onBlur() {},
    // 获取焦点事件
    onFocus() {
      if (this.value) {
        this.show = true;
      }
    },
    onClose() {
      this.value = '';
      this.$emit('on-Close', this.value);
    },

    searchPerson() {
      console.log(this.value);
      this.$emit('search', this.value);
    },
  },
};
</script>

<style scoped>
.in-input [type='search'] {
  -webkit-perspective: none;
}

.in-input::-webkit-search-cancel-button {
  display: none;
}
.in-close {
  margin-left: 5px;
}
.in-input {
  color: #323233;
  font-size: 14px;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  resize: none;
  line-height: inherit;
  text-align: left;
  background-color: transparent;
}
.in-body {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
}
.in-value {
  position: relative;
  word-wrap: break-word;
  vertical-align: middle;
  text-align: left;
  overflow: visible;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.van-icon {
  display: block;
  font-size: 16px;
  line-height: inherit;
}
.in-icon {
  margin-right: 4px;
}

.in-cell {
  line-height: 21px;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  flex: 1;
  background-color: transparent;
  position: relative;
  width: 100%;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  padding: 5px 8px 5px 0px;
}
.in-search {
  display: flex;
  flex: 1;
  background-color: #f7f8fa;
  padding-left: 12px;
  border-radius: 2px;
}
input {
  height: 18px;
  width: 100%;
}
.in-page {
  height: 54px;
  border-bottom: 0.5px solid rgb(224, 224, 224);
  overflow: hidden;
}
.in-border {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  box-sizing: border-box;
}
</style>
